<template>
  <div>
    <Card>
      <p slot="title">
        <Icon type="help-buoy"></Icon>
        iView-Table使用Render函数配置可编辑表格
      </p>

      <div slot="extra">
        <Button style="margin-top: -5px;margin-right:5px;" type="default" @click="getData">获取数据</Button>
        <Button style="margin-top: -5px;margin-right:5px;" type="default" @click="addNewRow">新增一行</Button>
      </div>

      <Table
        ref="table1"
        :columns="tableColumn2"
        :data="tableData"
        border
      ></Table>

    </Card>
  </div>
</template>

<script>
import {toDateString} from '@/libs/tools'

export default {
  name: "table-render-demo",
  data() {
    return {
      // 用来接收后台传输的数据
      tableData: [],
      tableColumn2: [
        {
          title: '姓名',
          key: 'userName',
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h("Input", {
                props: {
                  value: params.row.userName
                },
                on: {
                  input: function (event) {
                    params.row.userName = event;
                  }
                }
              });
            } else {
              return h("div", params.row.userName);
            }
          }
        }, {
          title: '电话号码',
          key: 'phone',
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h("Input", {
                props: {
                  value: params.row.phone
                },
                on: {
                  input: function (event) {
                    params.row.phone = event;
                  }
                }
              });
            } else {
              return h("div", params.row.phone);
            }
          }
        }, {
          title: '性别',
          key: 'sex',
          render: (h, params) => {
            //@h 是一个构造器，可以使用其创建新组建
            //@params 是表格的数据，params.row可以获取当前行的数据
            if (params.row.$isEdit) {
              return h("Select", {
                props: {
                  transfer: true,
                  value: params.row.sex
                },
                on: {
                  "on-change": (event) => {
                    params.row.sex = event
                  }
                }
              }, this.sexList.map((item) => {
                return h('Option', {
                  props: {
                    value: item.value,
                    label: item.label
                  }
                })
              }))
            } else {
              if (params.row.sex === 'male') {
                return h('Tag', {
                  props: {
                    color: '#2d8cf0'
                  }
                }, this.sexMap[params.row.sex])
              } else {
                return h('Tag', {
                  props: {
                    color: '#ff3b81'
                  }
                }, this.sexMap[params.row.sex])
              }
            }
          }
        },
        {
          title: '年龄',
          key: 'age',
          align: 'center',
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h('div', [
                h('InputNumber', {
                  props: {
                    value: params.row.age,
                    min: 0,
                    max: 200,
                  },
                  on: {
                    'on-change': (event) => {
                      params.row.age = event;
                    },
                  },
                }),
              ]);
            } else {
              return h("div", params.row.age);
            }
          },
        },
        {
          title: '电子邮箱',
          key: 'email',
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h("Input", {
                props: {
                  value: params.row.email
                },
                on: {
                  input: function (event) {
                    params.row.email = event;
                  }
                }
              });
            } else {
              return h("div", params.row.email);
            }
          }
        }, {
          title: '出生日期',
          key: 'birthday',
          minWidth: 150,
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h("DatePicker", {
                props: {
                  type: 'date',
                  format: 'yyyy-MM-dd',
                  showWeekNumbers: true,
                  clearable: false,
                  transfer: true,
                  value: params.row.birthday
                },
                on: {
                  input: function (event) {
                    console.log(event.toLocaleString())
                    params.row.birthday = toDateString(event.toLocaleString(), 'yyyy-MM-dd')
                  }
                }
              });
            } else {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'ios-clock-outline ',
                    size: 14,
                  }
                }),
                h('span', {
                  style: {
                    'fontSize': '14px'
                  }
                }, params.row.birthday)
              ]);
            }
          }
        }, {
          title: '住址',
          key: 'zone',
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h("Input", {
                props: {
                  value: params.row.zone
                },
                on: {
                  input: function (event) {
                    params.row.zone = event;
                  }
                }
              });
            } else {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'ios-home-outline',
                    size: 14,
                  }
                }),
                h('span', {
                  style: {
                    'fontSize': '14px'
                  }
                }, params.row.zone)
              ]);
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          render: (h, params) => {
            return h('div', [

              h('Button', {
                props: {
                  type: params.row.$isEdit ? 'warning' : 'info',
                  size: 'small',
                  icon: ''
                },
                style: {
                  marginRight: '5px',
                },
                on: {
                  click: () => {
                    if (params.row.$isEdit) {
                      this.handleSave(params.row, params.index);
                    } else {
                      this.handleEdit(params.row);
                    }
                  }
                }
              }, params.row.$isEdit ? '保存' : '修改'),

              h('Poptip', {
                props: {
                  confirm: true,
                  title: '是否要删除此行？',
                  transfer: true
                },
                on: {
                  'on-ok': () => {
                    //删除逻辑
                    this.deleteRow(params.index);
                  }
                },
              }, [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                }, '删除')
              ]),
            ])
          }
        }
      ],
      sexList: [
        {
          label: '男',
          value: 'male',
        }, {
          label: '女',
          value: 'female'
        }
      ],
      sexMap: {
        male: '男',
        female: '女'
      }
    }
  },
  created() {
    this.tableData = [
      {userName: '张三', phone: '17897920001', sex: 'male', age: 32, email: '', birthday: '2017-09-12', zone: '济南'},
      {userName: '李四', phone: '13245909922', sex: 'male', age: 67, email: '', birthday: '2017-09-12', zone: '烟台'},
      {userName: '王五', phone: '19827272376', sex: 'female', age: 18, email: '', birthday: '2017-09-12', zone: '威海'},
    ]
    // 为了能修改数据需要在此处给每行数据加一个是否修改状态
    this.tableData.forEach(value => {
      value.$isEdit = false;
    });
  },
  methods: {
    // 修改按钮
    handleEdit(row) {
      this.$set(row, "$isEdit", true);
    },
    // 保存按钮
    handleSave(row, index) {
      this.$set(row, "$isEdit", false);
      this.tableData[index] = JSON.parse(JSON.stringify(row));
    },
    // 获取全部数据
    getData: function () {
      alert(JSON.stringify(this.tableData));
    },
    // 删除一行
    deleteRow: function (index) {
      this.tableData.splice(index, 1);
    },
    // 增加一行
    addNewRow: function () {
      let row = {
        sex: "male",
      };
      this.tableData.push(row);
    },
  }

}
</script>

